<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    table {
      width: 700px;
    }

    td {
      text-align: center;
    }

    td img {
      width: 70px;
      height: 70px;
    }

    .btn_wrap .active {
      color: red;
    }

    #sureEdit {
      display: none;
    }
  </style>
</head>

<body>
  <div>
    <h1>商品录入部分</h1>
    图片地址：<input type="text" id="imgsrc"> 商品名称：<input type="text" id="pname">
    <br>
    商品价格：<input type="text" id="price">
    商品分类：<select name="" id="sel">
      <option value="s1">冰箱</option>
      <option value="s2">手机</option>
      <option value="s3">电脑</option>
    </select>
    <button id="addBtn">添加</button>
    <button id="sureEdit">确认修改</button>
    <hr>
    名称：<input type="text" id="sname"> 价格：<input type="text" id="sprice">
    <button id="searchBtn">搜索</button>
  </div>
  <div>
    <div class="btn_wrap">
      <button se="" class="active">全部</button>
      <button se="s1">冰箱</button>
      <button se="s2">手机</button>
      <button se="s3">电脑</button>
    </div>
    <div id="showTips"></div>
    <table border="1">
      <thead>
        <tr>
          <th>图片</th>
          <th>名称</th>
          <th>价格</th>
          <th>种类</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="mybody">
        <!-- <tr>
          <td><img src="./images/bx1.jpg" alt=""></td>
          <td>手机1</td>
          <td>2323</td>
          <td>手机</td>
          <td>
            <a href="#">删除</a> <a href="#">修改</a>
          </td>
        </tr> -->
      </tbody>
    </table>
  </div>
  <script src="./javascripts/jquery-3.4.1.min.js"></script>
  <script>
    // 添加操作
    $("#addBtn").click(function () {
      if ($("#pname").val() && $("#price").val()) {
        $("#showTips").html("")
        $.ajax({
          url: "http://127.0.0.1:82/users/add",
          type: "post",
          data: {
            imgsrc: $("#imgsrc").val(),
            pname: $("#pname").val(),
            price: $("#price").val(),
            se: $("#sel").val()
          },
          success: function (res) {
            alert("添加成功")
            loadList()//添加后渲染列表
            // 清空输入框
            $("#imgsrc").val("")
            $("#pname").val("")
            $("#price").val("")
          }
        })
      } else {
        $("#showTips").html("商品名称/商品价格不能为空").css("color", "red")
      }
    })
    // 渲染列表
    function loadList(se, pname, price) {
      // 显示loading
      $("<img class='loading' src='./images/loading2.gif' />").css({
        "position": "absolute",
        top: 0,
        bottom: 0,
        right: 0,
        left: 0,
        margin: "auto"
      }).appendTo($("body"))

      $.ajax({
        url: "http://127.0.0.1:82/users/getlist",
        type: "post",
        data: {
          se: se,
          pname: pname,
          price: price
        },
        success: function (res) {
          var str = "";
          $.each(res, function (index, ele) {
            var seStr = "";
            if (ele.se == "s1") {
              seStr = "冰箱"
            } else if (ele.se == "s2") {
              seStr = "手机"
            } else if (ele.se == "s3") {
              seStr = "电脑"
            }
            str += ` <tr pid="${ele._id}">
              <td><img src="./images/${ele.imgsrc}.jpg" alt=""></td>
              <td>${ele.pname}</td>
              <td>${ele.price}</td>
              <td>${seStr}</td>
              <td>  
                <a href="#" onclick="del('${ele._id}')">删除</a> <a href="#" onclick=update(${JSON.stringify(ele)})>修改</a>
              </td>
            </tr>`
          })
          $("#mybody").html(str)
          // 移除loading图片
          setTimeout(function () {
            $(".loading").remove();
          }, 400)
        }
      })
    }
    loadList()
    function del(_id) {
      $.ajax({
        url: "http://127.0.0.1:82/users/del",
        type: "post",
        data: {
          _id: _id
        },
        success: function () {
          loadList()
        }
      })
    }
    // 点击编辑
    var editId = null;
    function update(ele) {
      console.log(ele)
      editId = ele._id;//存储修改id
      $("#imgsrc").val(ele.imgsrc)
      $("#pname").val(ele.pname)
      $("#price").val(ele.price)
      $("#sel").val(ele.se)
      $("#addBtn").hide();
      $("#sureEdit").show();
    }
    // 确认修改
    $("#sureEdit").click(function () {
      $.ajax({
        url: "http://127.0.0.1:82/users/update",
        type: "post",
        data: {
          _id: editId,//修改比添加多传一个id
          imgsrc: $("#imgsrc").val(),
          pname: $("#pname").val(),
          price: $("#price").val(),
          se: $("#sel").val()
        },
        success: function () {
          loadList()
          $("#addBtn").show();
          $("#sureEdit").hide();
          // 修改完成清空输入框
          $("#imgsrc").val("")
          $("#pname").val("")
          $("#price").val("")

        }
      })
    })
    // 点击分类切换
    $(".btn_wrap button").click(function () {
      var se = $(this).attr("se");//获取自定义属性  s1  s2 s3 ""
      $(this).addClass("active").siblings().removeClass("active");
      loadList(se)
    })
    // 搜索功能
    $("#searchBtn").click(function () {
      var pname = $("#sname").val();
      var price = $("#sprice").val();
      if (pname || price) {
        loadList("", pname, price) //把获取的名称和价格传到查询接口
        $("#sname").val("")
        $("#sprice").val("")
      } else {
        alert("不能都为空")
      }
    })
  </script>
</body>

</html>